<template>
  <el-container>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%;" highlight-current-row >
        <el-table-column width="40">
          <template slot="header">
            <i class="el-icon-s-flag"></i>
          </template>
          <template slot-scope="scope">
            <i v-if="scope.row.published" class="el-icon-s-flag"></i>
          </template>
        </el-table-column>
        <el-table-column prop="versionId" label="版本号" width="60"></el-table-column>
        <el-table-column prop="authorName" label="提交人" width="100"></el-table-column>
        <el-table-column prop="operationType" label="操作" width="60" header-align="center" align="center"></el-table-column>
        <el-table-column prop="versionTime" label="提交时间" width="200" header-align="center" align="center"></el-table-column>
        <el-table-column prop="comment" label="备注" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" header-align="center" align="center" width="100">
          <template slot="header">
            <el-button type="text" icon="el-icon-download" @click="getLastVersion" title="获取最新版本"></el-button>
            <el-button type="text" icon="el-icon-upload" @click="pubLastVersion" title="发布最新版本"></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新列表"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-download" @click="getVersion(scope.row)" title="获取指定版本"></el-button>
            <el-button type="text" :disabled="scope.row.published" icon="el-icon-upload" @click="pubVersion(scope.row)" title="发布指定版本"></el-button>
            <el-button type="text" :disabled="!comparable" icon="el-icon-document-copy" @click="compare(scope.row)" title="版本比较"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="版本比较" width="90%" center :visible.sync="showCompare" @close="sourceVersion = null" :modal="false" :close-on-click-modal="false">
        <div style="height: 700px">
          <mf-monacoComparer ref="comparer" language="sql" theme="vs-dark"
          :sourceVersion="sourceVersion?sourceVersion.template:''"
          :targetVersion="targetVersion?targetVersion.template:''"></mf-monacoComparer>
        </div>
      </el-dialog>
    </el-main>
    <!--底部分页-->
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount">
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  props:{
    repo: {
      type: String,
      default: null,
      required: true
    },
    workItem: {
      type: Object,
      required: true
    },
    comparable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      queryObject:{
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          VersionTime: true
        },
        parameters:{
          startTime: null,
          endTime: null
        }
      },
      dataTable: {
        columns: [],
        result: [],
        pageCount: 0,
        rowCount: 0
      },
      showCompare: false,
      sourceVersion: null,
      targetVersion: null
    }
  },
  computed: {

  },
  watch:{
    workItem(newVal, oldVal) {
      if (newVal && newVal.name && newVal !== oldVal) {
        this.query();
      }
    }
  },
  created(){
    this.query();
  },
  methods:{
    query(){
      this.$service.version.items({routeData: { repo: this.repo },  params: {name: this.workItem.name}, data:this.queryObject}).then((response)=>{
        if(response.success){
          this.dataTable = response.data;
        }
      });
    },
    getLastVersion(){
      this.$service.version.pull({routeData: { repo: this.repo },  params: {name: this.workItem.name}}).then((response)=>{
        if(response.success){
          this.$emit('getVersion',response.data);
          alert('已成功下载['+this.workItem.name+']的最新版本');
        }
      });
    },
    getVersion(version){
      this.$service.version.pull({routeData: { repo: this.repo },  params: {name: version.name, versionId: version.versionId}}).then((response)=>{
        if(response.success){
          this.$emit('getVersion',response.data);
          alert('已成功下载['+version.name+']的指定版本');
        }
      });
    },
    pubLastVersion(){
      this.$service.pub.publish({routeData: { repo: this.repo },  params: {name: this.workItem.name}}).then((response)=>{
        if(response.success){
          this.$emit('pubVersion',response.data);
          this.query();
          alert('已成功发布['+this.workItem.name+']的最新版本');
        }
      });
    },
    pubVersion(version){
      this.$service.pub.publish({routeData: { repo: this.repo },  params: {name: version.name, versionId: version.versionId}}).then((response)=>{
        if(response.success){
          this.$emit('pubVersion',response.data);
          this.query();
          alert('已成功发布['+version.name+']的指定版本');
        }
      });
    },
    compare(version){
      this.$service.version.item({routeData: { repo: this.repo },  params: {name: version.name, versionId: version.versionId}}).then((response)=>{
        if(response.success){
          this.showCompare = true;
          this.$nextTick(()=>{
            if (this.$refs.comparer)
              this.$refs.comparer.layout();
            this.sourceVersion = response.data;
            this.$emit('compare', {callback:this.compareHandle, version: this.sourceVersion});
          });
        }
      });
    },
    compareHandle(targetVersion){
      this.$nextTick(()=>{
        this.targetVersion = targetVersion;
      });
    }
  }
}
</script>
